<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      margin: 0em;
      padding: 2em;
    }

    #source {
      color: blue;
      border: 1px solid black;
    }

    #target {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection to move the element.
  </p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>

<script>
  //todo https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

  //https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
  //effectAllowed可取值：copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized
  //+ linkMove是指允许两个 link 和 move, copyLink copyMove 也是一样的
  //+ uninitialized 等将于 all
  //+ Internet Explorer will change the value to be lowercased; thus, linkMove will become linkmove, and so on.
  //只有ondragstart可以用来设置这个属性，其他事件中设置这个属性是无效的。

  //https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect
  //dropeffect可取值：none|copy|link|move
  //会影响你拖动时鼠标显示的icon
  //+ move: 就是一个长方形虚线框
  //+ copy: move的基础之上,会多个加号的图标
  //+ link: move的基础之上,会多一个类似于网上应用的icon

  //如果 effectAllowed 和 dropeffect(在drop事件之前最终设置的值) 设置的值不一样, 那么是无法触发 drop 释放事件的

  function dragstart_handler(ev) {
    console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);

    // Add this element's id to the drag payload so the drop handler will
    // know which element to add to its tree
    ev.dataTransfer.setData("text", ev.target.id);
    // ev.dataTransfer.effectAllowed = "move"; //todo 只有ondragstart可以用来设置这个属性，其他事件中设置这个属性是无效的。 //https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed ---> Assigning a value to effectAllowed in events other than dragstart has no effect.
  }

  //Note that each handler calls preventDefault() to prevent additional event processing for this event (such as touch events or pointer events).

  function drop_handler(ev) {
    console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
    ev.preventDefault();

    // Get the id of the target and add the moved element to the target's DOM
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

  function dragover_handler(ev) {
    console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
    ev.preventDefault(); //todo 必须有 这样阻止了 下面的drop事件才能触发 //https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets
    // Set the dropEffect to move
    ev.dataTransfer.dropEffect = "move"
  }
</script>
</body>
</html>
